<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>cavasTool 画图 | 个人博客</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="https://cdn.jsdelivr.net/gh/qqlcx5/figure-bed@v1.0.0/image/polar_bear.jpg">
    <script async="async" src="https://hm.baidu.com/hm.js?662dade0b3fe9911e80442e86935e233"></script>
    <meta name="description" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/saas-vuepress/assets/css/0.styles.b127ab38.css" as="style"><link rel="preload" href="/saas-vuepress/assets/js/app.fa9b9339.js" as="script"><link rel="preload" href="/saas-vuepress/assets/js/2.03dacb0b.js" as="script"><link rel="preload" href="/saas-vuepress/assets/js/54.9077bcb6.js" as="script"><link rel="prefetch" href="/saas-vuepress/assets/js/10.694c1f9b.js"><link rel="prefetch" href="/saas-vuepress/assets/js/100.c7689fff.js"><link rel="prefetch" href="/saas-vuepress/assets/js/101.9af96cb7.js"><link rel="prefetch" href="/saas-vuepress/assets/js/102.99475b6f.js"><link rel="prefetch" href="/saas-vuepress/assets/js/103.c9d091f6.js"><link rel="prefetch" href="/saas-vuepress/assets/js/104.1009c720.js"><link rel="prefetch" href="/saas-vuepress/assets/js/105.d537fa90.js"><link rel="prefetch" href="/saas-vuepress/assets/js/106.98a4dabb.js"><link rel="prefetch" href="/saas-vuepress/assets/js/107.78b62d44.js"><link rel="prefetch" href="/saas-vuepress/assets/js/108.a267cb41.js"><link rel="prefetch" href="/saas-vuepress/assets/js/109.55d7058d.js"><link rel="prefetch" href="/saas-vuepress/assets/js/11.6a7519cb.js"><link rel="prefetch" href="/saas-vuepress/assets/js/110.df9942aa.js"><link rel="prefetch" href="/saas-vuepress/assets/js/111.7537b42c.js"><link rel="prefetch" href="/saas-vuepress/assets/js/112.7e2567b8.js"><link rel="prefetch" href="/saas-vuepress/assets/js/113.2cabdb03.js"><link rel="prefetch" href="/saas-vuepress/assets/js/114.3ab0f8ec.js"><link rel="prefetch" href="/saas-vuepress/assets/js/115.f61e8285.js"><link rel="prefetch" href="/saas-vuepress/assets/js/116.88a464e4.js"><link rel="prefetch" href="/saas-vuepress/assets/js/117.3b7c82dd.js"><link rel="prefetch" href="/saas-vuepress/assets/js/118.f457df12.js"><link rel="prefetch" href="/saas-vuepress/assets/js/119.c01d1cab.js"><link rel="prefetch" href="/saas-vuepress/assets/js/12.30ce9516.js"><link rel="prefetch" href="/saas-vuepress/assets/js/120.98c2000e.js"><link rel="prefetch" href="/saas-vuepress/assets/js/121.ceea03b1.js"><link rel="prefetch" href="/saas-vuepress/assets/js/122.820456eb.js"><link rel="prefetch" href="/saas-vuepress/assets/js/123.2c1d01b4.js"><link rel="prefetch" href="/saas-vuepress/assets/js/124.0bd539fd.js"><link rel="prefetch" href="/saas-vuepress/assets/js/125.23a0d200.js"><link rel="prefetch" href="/saas-vuepress/assets/js/126.8bdc3c39.js"><link rel="prefetch" href="/saas-vuepress/assets/js/127.17046da4.js"><link rel="prefetch" href="/saas-vuepress/assets/js/128.37bf9c00.js"><link rel="prefetch" href="/saas-vuepress/assets/js/129.aa8dd5e3.js"><link rel="prefetch" href="/saas-vuepress/assets/js/13.ee5d5b4c.js"><link rel="prefetch" href="/saas-vuepress/assets/js/130.c2683fa6.js"><link rel="prefetch" href="/saas-vuepress/assets/js/131.1fdb6791.js"><link rel="prefetch" href="/saas-vuepress/assets/js/14.950c6af7.js"><link rel="prefetch" href="/saas-vuepress/assets/js/15.80980eb9.js"><link rel="prefetch" href="/saas-vuepress/assets/js/16.1999adea.js"><link rel="prefetch" href="/saas-vuepress/assets/js/17.c7711021.js"><link rel="prefetch" href="/saas-vuepress/assets/js/18.25c22728.js"><link rel="prefetch" href="/saas-vuepress/assets/js/19.db7c38aa.js"><link rel="prefetch" href="/saas-vuepress/assets/js/20.b85fddaa.js"><link rel="prefetch" href="/saas-vuepress/assets/js/21.1db2aa08.js"><link rel="prefetch" href="/saas-vuepress/assets/js/22.836f2d02.js"><link rel="prefetch" href="/saas-vuepress/assets/js/23.bba7ac7b.js"><link rel="prefetch" href="/saas-vuepress/assets/js/24.c7032827.js"><link rel="prefetch" href="/saas-vuepress/assets/js/25.70228854.js"><link rel="prefetch" href="/saas-vuepress/assets/js/26.3ae08475.js"><link rel="prefetch" href="/saas-vuepress/assets/js/27.d4c45324.js"><link rel="prefetch" href="/saas-vuepress/assets/js/28.95438191.js"><link rel="prefetch" href="/saas-vuepress/assets/js/29.36d4e3da.js"><link rel="prefetch" href="/saas-vuepress/assets/js/3.85921ad7.js"><link rel="prefetch" href="/saas-vuepress/assets/js/30.291a3c91.js"><link rel="prefetch" href="/saas-vuepress/assets/js/31.b07e726b.js"><link rel="prefetch" href="/saas-vuepress/assets/js/32.dbb0082c.js"><link rel="prefetch" href="/saas-vuepress/assets/js/33.6dceddfe.js"><link rel="prefetch" href="/saas-vuepress/assets/js/34.4361e184.js"><link rel="prefetch" href="/saas-vuepress/assets/js/35.a8be0f9b.js"><link rel="prefetch" href="/saas-vuepress/assets/js/36.cf6c4bed.js"><link rel="prefetch" href="/saas-vuepress/assets/js/37.db8a983b.js"><link rel="prefetch" href="/saas-vuepress/assets/js/38.928e4457.js"><link rel="prefetch" href="/saas-vuepress/assets/js/39.ce656415.js"><link rel="prefetch" href="/saas-vuepress/assets/js/4.a540a415.js"><link rel="prefetch" href="/saas-vuepress/assets/js/40.015f7ed5.js"><link rel="prefetch" href="/saas-vuepress/assets/js/41.65efab94.js"><link rel="prefetch" href="/saas-vuepress/assets/js/42.e4b051b4.js"><link rel="prefetch" href="/saas-vuepress/assets/js/43.8b10d5db.js"><link rel="prefetch" href="/saas-vuepress/assets/js/44.b2659fd6.js"><link rel="prefetch" href="/saas-vuepress/assets/js/45.0a1871c7.js"><link rel="prefetch" href="/saas-vuepress/assets/js/46.ee674bf3.js"><link rel="prefetch" href="/saas-vuepress/assets/js/47.7461dfbb.js"><link rel="prefetch" href="/saas-vuepress/assets/js/48.a14b85e8.js"><link rel="prefetch" href="/saas-vuepress/assets/js/49.423ed53e.js"><link rel="prefetch" href="/saas-vuepress/assets/js/5.31489c9d.js"><link rel="prefetch" href="/saas-vuepress/assets/js/50.774f5f6a.js"><link rel="prefetch" href="/saas-vuepress/assets/js/51.1a5fc27c.js"><link rel="prefetch" href="/saas-vuepress/assets/js/52.adae1df6.js"><link rel="prefetch" href="/saas-vuepress/assets/js/53.a484c390.js"><link rel="prefetch" href="/saas-vuepress/assets/js/55.d7ed3bf6.js"><link rel="prefetch" href="/saas-vuepress/assets/js/56.f496ee38.js"><link rel="prefetch" href="/saas-vuepress/assets/js/57.347b8e56.js"><link rel="prefetch" href="/saas-vuepress/assets/js/58.e299a281.js"><link rel="prefetch" href="/saas-vuepress/assets/js/59.aa26c2a0.js"><link rel="prefetch" href="/saas-vuepress/assets/js/6.3770f528.js"><link rel="prefetch" href="/saas-vuepress/assets/js/60.e5e36495.js"><link rel="prefetch" href="/saas-vuepress/assets/js/61.08bdec95.js"><link rel="prefetch" href="/saas-vuepress/assets/js/62.706b0f3e.js"><link rel="prefetch" href="/saas-vuepress/assets/js/63.030ae462.js"><link rel="prefetch" href="/saas-vuepress/assets/js/64.40830457.js"><link rel="prefetch" href="/saas-vuepress/assets/js/65.019b6b71.js"><link rel="prefetch" href="/saas-vuepress/assets/js/66.4233e242.js"><link rel="prefetch" href="/saas-vuepress/assets/js/67.8d22de74.js"><link rel="prefetch" href="/saas-vuepress/assets/js/68.44a5978e.js"><link rel="prefetch" href="/saas-vuepress/assets/js/69.0a559927.js"><link rel="prefetch" href="/saas-vuepress/assets/js/7.c9695630.js"><link rel="prefetch" href="/saas-vuepress/assets/js/70.c62d31fb.js"><link rel="prefetch" href="/saas-vuepress/assets/js/71.045cc192.js"><link rel="prefetch" href="/saas-vuepress/assets/js/72.ce37961a.js"><link rel="prefetch" href="/saas-vuepress/assets/js/73.af2893c7.js"><link rel="prefetch" href="/saas-vuepress/assets/js/74.f220272c.js"><link rel="prefetch" href="/saas-vuepress/assets/js/75.b531c409.js"><link rel="prefetch" href="/saas-vuepress/assets/js/76.919d7a27.js"><link rel="prefetch" href="/saas-vuepress/assets/js/77.ddab4b6d.js"><link rel="prefetch" href="/saas-vuepress/assets/js/78.70f1b9a2.js"><link rel="prefetch" href="/saas-vuepress/assets/js/79.816612ff.js"><link rel="prefetch" href="/saas-vuepress/assets/js/8.ddd1baf7.js"><link rel="prefetch" href="/saas-vuepress/assets/js/80.4f614128.js"><link rel="prefetch" href="/saas-vuepress/assets/js/81.064c7f61.js"><link rel="prefetch" href="/saas-vuepress/assets/js/82.b9ea733a.js"><link rel="prefetch" href="/saas-vuepress/assets/js/83.e7f64816.js"><link rel="prefetch" href="/saas-vuepress/assets/js/84.b255df78.js"><link rel="prefetch" href="/saas-vuepress/assets/js/85.35756ce8.js"><link rel="prefetch" href="/saas-vuepress/assets/js/86.19c8558a.js"><link rel="prefetch" href="/saas-vuepress/assets/js/87.aa6fa757.js"><link rel="prefetch" href="/saas-vuepress/assets/js/88.703dba52.js"><link rel="prefetch" href="/saas-vuepress/assets/js/89.6ce30efd.js"><link rel="prefetch" href="/saas-vuepress/assets/js/9.f77824c4.js"><link rel="prefetch" href="/saas-vuepress/assets/js/90.695919ef.js"><link rel="prefetch" href="/saas-vuepress/assets/js/91.3a6f04b2.js"><link rel="prefetch" href="/saas-vuepress/assets/js/92.c17ba399.js"><link rel="prefetch" href="/saas-vuepress/assets/js/93.7fd4aef1.js"><link rel="prefetch" href="/saas-vuepress/assets/js/94.d0f283fc.js"><link rel="prefetch" href="/saas-vuepress/assets/js/95.71759539.js"><link rel="prefetch" href="/saas-vuepress/assets/js/96.ffbe6ab0.js"><link rel="prefetch" href="/saas-vuepress/assets/js/97.13de9047.js"><link rel="prefetch" href="/saas-vuepress/assets/js/98.d8617209.js"><link rel="prefetch" href="/saas-vuepress/assets/js/99.3788669b.js">
    <link rel="stylesheet" href="/saas-vuepress/assets/css/0.styles.b127ab38.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/saas-vuepress/" class="home-link router-link-active"><!----> <span class="site-name">个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/saas-vuepress/指南/10.基础/01.介绍.html" class="nav-link">
  指南
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/saas-vuepress/指南/10.基础/01.介绍.html" class="nav-link">
  指南
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/10.基础/01.介绍.html" class="sidebar-link">介绍</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>assets</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/20.assets/01.styles.html" class="sidebar-link">styles</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/30.common/01.components组件.html" class="sidebar-link">components组件</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common-components</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/31.common-components/01.c-button.html" class="sidebar-link">c-button</a></li><li><a href="/saas-vuepress/指南/31.common-components/02.c-cell.html" class="sidebar-link">c-cell</a></li><li><a href="/saas-vuepress/指南/31.common-components/03.c-checkbox.html" class="sidebar-link">c-checkbox</a></li><li><a href="/saas-vuepress/指南/31.common-components/04.c-layout.html" class="sidebar-link">c-layout</a></li><li><a href="/saas-vuepress/指南/31.common-components/05.c-colors.html" class="sidebar-link">c-colors</a></li><li><a href="/saas-vuepress/指南/31.common-components/06.c-count-down.html" class="sidebar-link">c-count-down</a></li><li><a href="/saas-vuepress/指南/31.common-components/07.c-fixed-menu.html" class="sidebar-link">c-fixed-menu</a></li><li><a href="/saas-vuepress/指南/31.common-components/08.c-icons.html" class="sidebar-link">c-icons</a></li><li><a href="/saas-vuepress/指南/31.common-components/09.c-image.html" class="sidebar-link">c-image</a></li><li><a href="/saas-vuepress/指南/31.common-components/10.c-input.html" class="sidebar-link">c-input</a></li><li><a href="/saas-vuepress/指南/31.common-components/11.c-jyf-parser.html" class="sidebar-link">c-jyf-parser</a></li><li><a href="/saas-vuepress/指南/31.common-components/12.c-live-player.html" class="sidebar-link">c-live-player</a></li><li><a href="/saas-vuepress/指南/31.common-components/13.c-loading.html" class="sidebar-link">c-loading</a></li><li><a href="/saas-vuepress/指南/31.common-components/14.c-mask.html" class="sidebar-link">c-mask</a></li><li><a href="/saas-vuepress/指南/31.common-components/15.c-modal.html" class="sidebar-link">c-modal</a></li><li><a href="/saas-vuepress/指南/31.common-components/16.c-page-head.html" class="sidebar-link">c-page-head</a></li><li><a href="/saas-vuepress/指南/31.common-components/17.c-popup.html" class="sidebar-link">c-popup</a></li><li><a href="/saas-vuepress/指南/31.common-components/18.c-radio.html" class="sidebar-link">c-radio</a></li><li><a href="/saas-vuepress/指南/31.common-components/19.c-recommend.html" class="sidebar-link">c-recommend</a></li><li><a href="/saas-vuepress/指南/31.common-components/20.c-recommend-goods.html" class="sidebar-link">c-recommend-goods</a></li><li><a href="/saas-vuepress/指南/31.common-components/21.c-row.html" class="sidebar-link">c-row</a></li><li><a href="/saas-vuepress/指南/31.common-components/22.c-select-city.html" class="sidebar-link">c-select-city</a></li><li><a href="/saas-vuepress/指南/31.common-components/23.c-select-spec.html" class="sidebar-link">c-select-spec</a></li><li><a href="/saas-vuepress/指南/31.common-components/24.c-share-wechat.html" class="sidebar-link">c-share-wechat</a></li><li><a href="/saas-vuepress/指南/31.common-components/25.c-status-bar.html" class="sidebar-link">c-status-bar</a></li><li><a href="/saas-vuepress/指南/31.common-components/26.c-subscribe.html" class="sidebar-link">c-subscribe</a></li><li><a href="/saas-vuepress/指南/31.common-components/27.c-subsection.html" class="sidebar-link">c-subsection</a></li><li><a href="/saas-vuepress/指南/31.common-components/28.c-swipe-action.html" class="sidebar-link">c-swipe-action</a></li><li><a href="/saas-vuepress/指南/31.common-components/29.c-tabbar.html" class="sidebar-link">c-tabbar</a></li><li><a href="/saas-vuepress/指南/31.common-components/30.c-coupon-popup.html" class="sidebar-link">c-coupon-popup</a></li><li><a href="/saas-vuepress/指南/31.common-components/31.c-coupon-detail.html" class="sidebar-link">c-coupon-detail</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common-config</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/32.common-config/01.index.html" class="sidebar-link">index</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common-filters</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/33.common-filters/01.index.html" class="sidebar-link">index</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common-mixins</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/34.common-mixins/06.globalMixins.html" class="sidebar-link">globalMixins</a></li><li><a href="/saas-vuepress/指南/34.common-mixins/07.list.html" class="sidebar-link">list</a></li><li><a href="/saas-vuepress/指南/34.common-mixins/08.pay.html" class="sidebar-link">pay</a></li><li><a href="/saas-vuepress/指南/34.common-mixins/09.pushMessage.html" class="sidebar-link">pushMessage</a></li><li><a href="/saas-vuepress/指南/34.common-mixins/10.realName.html" class="sidebar-link">realName</a></li><li><a href="/saas-vuepress/指南/34.common-mixins/11.share.html" class="sidebar-link">share</a></li><li><a href="/saas-vuepress/指南/34.common-mixins/12.shareMixins.html" class="sidebar-link">shareMixins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common-router</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/35.common-router/01.index.html" class="sidebar-link">index</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common-service</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/36.common-service/01.index.html" class="sidebar-link">index</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common-styles</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/37.common-styles/01.index.html" class="sidebar-link">index</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>common-utils</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/38.common-utils/01.cavasTool.html" class="active sidebar-link">cavasTool</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/saas-vuepress/指南/38.common-utils/01.cavasTool.html#基本使用" class="sidebar-link">基本使用</a></li></ul></li><li><a href="/saas-vuepress/指南/38.common-utils/02.colorGradient.html" class="sidebar-link">colorGradient</a></li><li><a href="/saas-vuepress/指南/38.common-utils/03.common.html" class="sidebar-link">common</a></li><li><a href="/saas-vuepress/指南/38.common-utils/04.countDown.html" class="sidebar-link">countDown</a></li><li><a href="/saas-vuepress/指南/38.common-utils/05.emitter.html" class="sidebar-link">emitter</a></li><li><a href="/saas-vuepress/指南/38.common-utils/06.global.html" class="sidebar-link">global</a></li><li><a href="/saas-vuepress/指南/38.common-utils/07.index.html" class="sidebar-link">index</a></li><li><a href="/saas-vuepress/指南/38.common-utils/08.pay.html" class="sidebar-link">pay</a></li><li><a href="/saas-vuepress/指南/38.common-utils/09.tool.html" class="sidebar-link">tool</a></li><li><a href="/saas-vuepress/指南/38.common-utils/10.validate.html" class="sidebar-link">validate</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>common-scss</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/39.common-scss/01.index.html" class="sidebar-link">index</a></li><li><a href="/saas-vuepress/指南/39.common-scss/02.theme.html" class="sidebar-link">theme</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>components</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/40.components/01.formBase.html" class="sidebar-link">formBase</a></li><li><a href="/saas-vuepress/指南/40.components/02.ss-share-wechat.html" class="sidebar-link">ss-share-wechat</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>goods目录</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/60.goods目录/01.collect商品收藏.html" class="sidebar-link">collect商品收藏</a></li><li><a href="/saas-vuepress/指南/60.goods目录/01.商品收藏.html" class="sidebar-link">商品收藏</a></li><li><a href="/saas-vuepress/指南/60.goods目录/03.details商品详情.html" class="sidebar-link">details商品详情</a></li><li><a href="/saas-vuepress/指南/60.goods目录/03.商品详情.html" class="sidebar-link">商品详情</a></li><li><a href="/saas-vuepress/指南/60.goods目录/04.group拼团.html" class="sidebar-link">group拼团</a></li><li><a href="/saas-vuepress/指南/60.goods目录/05.hot-selling精选好物.html" class="sidebar-link">hot-selling精选好物</a></li><li><a href="/saas-vuepress/指南/60.goods目录/06.logistics物流.html" class="sidebar-link">logistics物流</a></li><li><a href="/saas-vuepress/指南/60.goods目录/07.newGift新人专享福利.html" class="sidebar-link">newGift新人专享福利</a></li><li><a href="/saas-vuepress/指南/60.goods目录/08.order订单、拼团.html" class="sidebar-link">order订单、拼团</a></li><li><a href="/saas-vuepress/指南/60.goods目录/09.refuse售后.html" class="sidebar-link">refuse售后</a></li><li><a href="/saas-vuepress/指南/60.goods目录/10.search搜索.html" class="sidebar-link">search搜索</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>goods-components</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/61.goods-components/01.details-introduce.html" class="sidebar-link">details-introduce</a></li><li><a href="/saas-vuepress/指南/61.goods-components/02.details-tabs.html" class="sidebar-link">details-tabs</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>order订单</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/68.order订单/01.list订单列表.html" class="sidebar-link">list订单列表</a></li><li><a href="/saas-vuepress/指南/68.order订单/02.details商品详情.html" class="sidebar-link">details商品详情</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>refuse订单售后</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/69.refuse订单售后/01.list订单列表.html" class="sidebar-link">list订单列表</a></li><li><a href="/saas-vuepress/指南/69.refuse订单售后/02.details商品详情.html" class="sidebar-link">details商品详情</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>guest目录</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/70.guest目录/01.爆品视频模块.html" class="sidebar-link">爆品视频模块</a></li><li><a href="/saas-vuepress/指南/70.guest目录/02.工长模块.html" class="sidebar-link">工长模块</a></li><li><a href="/saas-vuepress/指南/70.guest目录/03.设计师模块.html" class="sidebar-link">设计师模块</a></li><li><a href="/saas-vuepress/指南/70.guest目录/04.优惠券模块.html" class="sidebar-link">优惠券模块</a></li><li><a href="/saas-vuepress/指南/70.guest目录/05.案例模块.html" class="sidebar-link">案例模块</a></li><li><a href="/saas-vuepress/指南/70.guest目录/06.攻略模块.html" class="sidebar-link">攻略模块</a></li><li><a href="/saas-vuepress/指南/70.guest目录/07.选择地址定位.html" class="sidebar-link">选择地址定位</a></li><li><a href="/saas-vuepress/指南/70.guest目录/08.套餐模块.html" class="sidebar-link">套餐模块</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>home-index-conmponents首页组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/01.banner轮播图.html" class="sidebar-link">banner轮播图</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/02.card精选品牌.html" class="sidebar-link">card精选品牌</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/03.case-list装修案例.html" class="sidebar-link">case-list装修案例</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/04.classification品类分类.html" class="sidebar-link">classification品类分类</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/05.combo整装套餐.html" class="sidebar-link">combo整装套餐</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/06.couple新人礼.html" class="sidebar-link">couple新人礼</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/07.designer设计师.html" class="sidebar-link">designer设计师</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/08.features-bottom特色服务.html" class="sidebar-link">features-bottom特色服务</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/09.goodslist推荐商品.html" class="sidebar-link">goodslist推荐商品</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/11.matrixMenu子菜单.html" class="sidebar-link">matrixMenu子菜单</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/12.module-title更多.html" class="sidebar-link">module-title更多</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/13.slide-menu侧边按钮.html" class="sidebar-link">slide-menu侧边按钮</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/14.timeTabs限时秒杀.html" class="sidebar-link">timeTabs限时秒杀</a></li><li><a href="/saas-vuepress/指南/80-1.home-index-conmponents首页组件/15.topSearchAndTabs头部搜索.html" class="sidebar-link">topSearchAndTabs头部搜索</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>首页组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/80-1.首页组件/01.banner轮播图.html" class="sidebar-link">banner轮播图</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/02.card精选品牌.html" class="sidebar-link">card精选品牌</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/03.case-list装修案例.html" class="sidebar-link">case-list装修案例</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/04.classification品类分类.html" class="sidebar-link">classification品类分类</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/05.combo整装套餐.html" class="sidebar-link">combo整装套餐</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/06.couple新人礼.html" class="sidebar-link">couple新人礼</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/07.designer设计师.html" class="sidebar-link">designer设计师</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/08.features-bottom特色服务.html" class="sidebar-link">features-bottom特色服务</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/09.goodslist推荐商品.html" class="sidebar-link">goodslist推荐商品</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/11.matrixMenu子菜单.html" class="sidebar-link">matrixMenu子菜单</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/12.module-title更多.html" class="sidebar-link">module-title更多</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/12.module-title模块标题.html" class="sidebar-link">module-title模块标题</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/13.slide-menu侧边按钮.html" class="sidebar-link">slide-menu侧边按钮</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/14.timeTabs限时秒杀.html" class="sidebar-link">timeTabs限时秒杀</a></li><li><a href="/saas-vuepress/指南/80-1.首页组件/15.topSearchAndTabs头部搜索.html" class="sidebar-link">topSearchAndTabs头部搜索</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>home目录</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/saas-vuepress/指南/80.home目录/01.category商品分类.html" class="sidebar-link">category商品分类</a></li><li><a href="/saas-vuepress/指南/80.home目录/01.商品分类.html" class="sidebar-link">商品分类</a></li><li><a href="/saas-vuepress/指南/80.home目录/02.index首页.html" class="sidebar-link">index首页</a></li><li><a href="/saas-vuepress/指南/80.home目录/02.首页.html" class="sidebar-link">首页</a></li><li><a href="/saas-vuepress/指南/80.home目录/03.login登录.html" class="sidebar-link">login登录</a></li><li><a href="/saas-vuepress/指南/80.home目录/03.登录.html" class="sidebar-link">登录</a></li><li><a href="/saas-vuepress/指南/80.home目录/04.shopping-cart购物车.html" class="sidebar-link">shopping-cart购物车</a></li><li><a href="/saas-vuepress/指南/80.home目录/04.购物车.html" class="sidebar-link">购物车</a></li><li><a href="/saas-vuepress/指南/80.home目录/05.user我的.html" class="sidebar-link">user我的</a></li><li><a href="/saas-vuepress/指南/80.home目录/05.我的.html" class="sidebar-link">我的</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="cavastool-画图"><a href="#cavastool-画图" class="header-anchor">#</a> cavasTool 画图</h1> <h2 id="基本使用"><a href="#基本使用" class="header-anchor">#</a> 基本使用</h2> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">//引用</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getSharePoster <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/common/utils/cavasTool/QS-SharePoster'</span><span class="token punctuation">;</span>

<span class="token comment">//生成海报图</span>
<span class="token keyword">let</span> width <span class="token operator">=</span> <span class="token number">600</span><span class="token punctuation">,</span>
	imgHeight <span class="token operator">=</span> width<span class="token punctuation">,</span>
	height <span class="token operator">=</span> imgHeight <span class="token operator">+</span> <span class="token number">300</span><span class="token punctuation">;</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
	<span class="token comment">// _app.log('准备生成:' + new Date())</span>
	<span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getSharePoster</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		_this<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token comment">//若在组件中使用 必传</span>
		type<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
		background<span class="token operator">:</span> <span class="token punctuation">{</span>
			<span class="token comment">//设置自定义背景画布, 若传该属性则背景图失效</span>
			height<span class="token punctuation">,</span> <span class="token comment">//画布高度</span>
			width<span class="token punctuation">,</span> <span class="token comment">//画布宽度</span>
			backgroundColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> <span class="token comment">//背景颜色</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		posterCanvasId<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>canvasId<span class="token punctuation">,</span> <span class="token comment">//canvasId</span>
		delayTimeScale<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token comment">//延时系数</span>
		<span class="token function-variable function">drawArray</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
			bgObj<span class="token punctuation">,</span>
			type<span class="token punctuation">,</span>
			bgScale
		<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
			<span class="token keyword">const</span> fontSize <span class="token operator">=</span> <span class="token number">28</span><span class="token punctuation">;</span>
			<span class="token keyword">const</span> tagSize <span class="token operator">=</span> <span class="token number">24</span><span class="token punctuation">;</span>
			<span class="token keyword">const</span> userImgSize <span class="token operator">=</span> <span class="token number">80</span><span class="token punctuation">;</span>
			<span class="token keyword">const</span> lineHeight <span class="token operator">=</span> <span class="token number">1.5</span> <span class="token operator">*</span> fontSize<span class="token punctuation">;</span>
			<span class="token keyword">let</span> u24 <span class="token operator">=</span> <span class="token number">24</span><span class="token punctuation">;</span>
			<span class="token comment">//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报</span>
			<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">rs<span class="token punctuation">,</span> rj</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				<span class="token keyword">let</span> postArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
						type<span class="token operator">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
						url<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$config<span class="token punctuation">.</span>proxyImgUrl <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>shareImg<span class="token punctuation">,</span>
						<span class="token comment">// alpha: .3,</span>
						dx<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
						dy<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
						dWidth<span class="token operator">:</span> bgObj<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
						dHeight<span class="token operator">:</span> imgHeight<span class="token punctuation">,</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">// 标题</span>
					<span class="token punctuation">{</span>
						type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
						text<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span>
						size<span class="token operator">:</span> fontSize<span class="token punctuation">,</span>
						color<span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
						lineFeed<span class="token operator">:</span> <span class="token punctuation">{</span>
							maxWidth<span class="token operator">:</span> bgObj<span class="token punctuation">.</span>width <span class="token operator">-</span> u24<span class="token punctuation">,</span>
							lineHeight<span class="token operator">:</span> <span class="token number">1.5</span> <span class="token operator">*</span> u24<span class="token punctuation">,</span>
							lineNum<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
						<span class="token punctuation">}</span><span class="token punctuation">,</span>
						dx<span class="token operator">:</span> u24<span class="token punctuation">,</span>
						dy<span class="token operator">:</span> imgHeight <span class="token operator">+</span> <span class="token number">1.5</span> <span class="token operator">*</span> u24<span class="token punctuation">,</span>
						textAlign<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
						textBaseline<span class="token operator">:</span> <span class="token string">'middle'</span><span class="token punctuation">,</span>
						serialNum<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
						id<span class="token operator">:</span> <span class="token string">'title'</span><span class="token punctuation">,</span> <span class="token comment">//自定义标识</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">// 用户头像</span>
					<span class="token punctuation">{</span>
						type<span class="token operator">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
						url<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$config<span class="token punctuation">.</span>proxyImgUrl <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userInfo<span class="token punctuation">.</span>user_picture<span class="token punctuation">,</span>
						<span class="token comment">// alpha: .3,</span>
						dx<span class="token operator">:</span> u24<span class="token punctuation">,</span>
						dy<span class="token operator">:</span> bgObj<span class="token punctuation">.</span>height <span class="token operator">-</span> <span class="token number">72</span> <span class="token operator">-</span> userImgSize<span class="token punctuation">,</span>
						dWidth<span class="token operator">:</span> userImgSize<span class="token punctuation">,</span>
						dHeight<span class="token operator">:</span> userImgSize<span class="token punctuation">,</span>
						circleSet<span class="token operator">:</span> <span class="token boolean">true</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">// 用户名</span>
					<span class="token punctuation">{</span>
						type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
						text<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userInfo<span class="token punctuation">.</span>nick_name <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userInfo<span class="token punctuation">.</span>nick_name <span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userInfo<span class="token punctuation">.</span>mobile<span class="token punctuation">,</span>
						size<span class="token operator">:</span> fontSize<span class="token punctuation">,</span>
						color<span class="token operator">:</span> <span class="token string">'#333333'</span><span class="token punctuation">,</span>
						textAlign<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
						textBaseline<span class="token operator">:</span> <span class="token string">'middle'</span><span class="token punctuation">,</span>
						serialNum<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
						dx<span class="token operator">:</span> userImgSize <span class="token operator">+</span> <span class="token number">1.6</span> <span class="token operator">*</span> u24<span class="token punctuation">,</span>
						dy<span class="token operator">:</span> bgObj<span class="token punctuation">.</span>height <span class="token operator">-</span> <span class="token number">132</span><span class="token punctuation">,</span>
						lineFeed<span class="token operator">:</span> <span class="token punctuation">{</span>
							maxWidth<span class="token operator">:</span> bgObj<span class="token punctuation">.</span>width <span class="token operator">-</span> <span class="token number">3.5</span> <span class="token operator">*</span> userImgSize <span class="token operator">-</span> userImgSize<span class="token punctuation">,</span>
							lineNum<span class="token operator">:</span> <span class="token number">1</span>
						<span class="token punctuation">}</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">// 简介</span>
					<span class="token punctuation">{</span>
						type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
						text<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>summary <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>summary <span class="token operator">:</span> <span class="token string">'向您分享一篇精选好文'</span><span class="token punctuation">,</span>
						size<span class="token operator">:</span> <span class="token number">0.7</span> <span class="token operator">*</span> fontSize<span class="token punctuation">,</span>
						color<span class="token operator">:</span> <span class="token string">'#999999'</span><span class="token punctuation">,</span>
						textAlign<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
						textBaseline<span class="token operator">:</span> <span class="token string">'middle'</span><span class="token punctuation">,</span>
						serialNum<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
						dx<span class="token operator">:</span> userImgSize <span class="token operator">+</span> <span class="token number">1.6</span> <span class="token operator">*</span> u24<span class="token punctuation">,</span>
						dy<span class="token operator">:</span> bgObj<span class="token punctuation">.</span>height <span class="token operator">-</span> <span class="token number">90</span><span class="token punctuation">,</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token comment">// 二维码</span>
					<span class="token punctuation">{</span>
						type<span class="token operator">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
						url<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$config<span class="token punctuation">.</span>proxyImgUrl <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>qrCode<span class="token punctuation">,</span>
						dx<span class="token operator">:</span> <span class="token number">390</span><span class="token punctuation">,</span>
						dy<span class="token operator">:</span> bgObj<span class="token punctuation">.</span>height <span class="token operator">-</span> <span class="token number">210</span><span class="token punctuation">,</span>
						dWidth<span class="token operator">:</span> <span class="token number">2.5</span> <span class="token operator">*</span> userImgSize<span class="token punctuation">,</span>
						dHeight<span class="token operator">:</span> <span class="token number">2.5</span> <span class="token operator">*</span> userImgSize<span class="token punctuation">,</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token punctuation">]</span><span class="token punctuation">;</span>
				<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>extraTag<span class="token punctuation">)</span> <span class="token punctuation">{</span>
					<span class="token keyword">let</span> tagRadius <span class="token operator">=</span> <span class="token punctuation">(</span>tagSize <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> tagHeight <span class="token operator">=</span> bgObj<span class="token punctuation">.</span>height <span class="token operator">-</span> <span class="token number">190</span><span class="token punctuation">;</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>tagHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>tagRadius<span class="token punctuation">)</span><span class="token punctuation">;</span>
					<span class="token keyword">let</span> extraArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
						type<span class="token operator">:</span> <span class="token string">'roundFillRect'</span><span class="token punctuation">,</span>
						backgroundColor<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>colors_<span class="token punctuation">.</span>theme<span class="token punctuation">,</span>
						r<span class="token operator">:</span> tagRadius<span class="token punctuation">,</span>
						dx<span class="token operator">:</span> u24<span class="token punctuation">,</span>
						dy<span class="token operator">:</span> tagHeight<span class="token punctuation">,</span>
						width<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>extraTag<span class="token punctuation">.</span>length <span class="token operator">*</span> tagSize  <span class="token operator">+</span> <span class="token number">20</span><span class="token punctuation">,</span>
						height<span class="token operator">:</span> tagSize <span class="token operator">+</span> <span class="token number">10</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
						type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
						text<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>extraTag<span class="token punctuation">,</span>
						size<span class="token operator">:</span> tagSize<span class="token punctuation">,</span>
						color<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
						textBaseline<span class="token operator">:</span> <span class="token string">'middle'</span><span class="token punctuation">,</span>
						dx<span class="token operator">:</span> u24 <span class="token operator">+</span> <span class="token number">15</span><span class="token punctuation">,</span>
						dy<span class="token operator">:</span> tagHeight <span class="token operator">+</span> tagRadius <span class="token operator">+</span> <span class="token number">2</span><span class="token punctuation">,</span>
						id<span class="token operator">:</span> <span class="token string">'extraTag'</span>
					<span class="token punctuation">}</span><span class="token punctuation">]</span>
					postArr<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>dy <span class="token operator">+=</span> <span class="token number">20</span><span class="token punctuation">;</span>
					postArr<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span>dy <span class="token operator">+=</span> <span class="token number">20</span><span class="token punctuation">;</span>
					postArr<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">.</span>dy <span class="token operator">+=</span> <span class="token number">20</span><span class="token punctuation">;</span>
					postArr <span class="token operator">=</span> postArr<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>extraArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token punctuation">}</span>
				console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>postArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
				<span class="token function">rs</span><span class="token punctuation">(</span>postArr<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function-variable function">setCanvasWH</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
			bgObj<span class="token punctuation">,</span>
			type<span class="token punctuation">,</span>
			bgScale
		<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
			<span class="token comment">// 为动态设置画布宽高的方法，</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>poster <span class="token operator">=</span> bgObj<span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">2021-03-10 10:30</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/saas-vuepress/指南/37.common-styles/01.index.html" class="prev">
        index
      </a></span> <span class="next"><a href="/saas-vuepress/指南/38.common-utils/02.colorGradient.html">
        colorGradient
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/saas-vuepress/assets/js/app.fa9b9339.js" defer></script><script src="/saas-vuepress/assets/js/2.03dacb0b.js" defer></script><script src="/saas-vuepress/assets/js/54.9077bcb6.js" defer></script>
  </body>
</html>
